<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <script src="../js/vue.js"></script>
    <!-- 下载 引入 -->
    <script src="../js/vue-router.js"></script>
    <style>
        html {
            /* 设置rem:  1rem=100px(设计图) */
            font-size: -webkit-calc(100vw/7.5);
        }

        body {
            font-size: 0.24rem;
        }

        html,
        body,
        #app {
            width: 100%;
            height: 100%;
        }

        #app {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        #app .main {
            flex: 1;
            overflow-y: auto;
        }

        #app .footer {
            height: 0.8rem;
            line-height: 0.8rem;
            text-align: center;
            display: flex;
            border-top: 1px solid #707070;
        }

        #app .footer a {
            flex: 1;
        }
    </style>
</head>

<body>
    <div id="app">

        <!-- <component class="main" :is="compName"></component>
        <div class="footer">
            <a href="#/" >首页</a>
            <a href="#/list" >列表</a>
            <a href="#/car" >购物车</a>
            <a href="#/mine" >我的</a>
        </div> -->



        <!-- 
            Vue.use(VueRouter)   使用vue-router插件 之后Vue-router内置组件

            router-link  => 等价于a
            router-view  => 动态组件, 组件切换
         -->

        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view class="main" ></router-view>
        <div class="footer">
            <!-- <a href="#/" >首页</a>
            <a href="#/list" >列表</a>
            <a href="#/car" >购物车</a>
            <a href="#/mine" >我的</a> -->

            <!-- 使用 router-link 组件来导航. -->
            <!-- 通过传入 `to` 属性指定链接. -->
            <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
            <router-link to="/">首页</router-link>
            <router-link to="/list">列表</router-link>
            <router-link to="/car">购物车</router-link>
            <router-link to="/mine">我的</router-link>
        </div>
    </div>
</body>
<script type="module" src="../js/main.js"></script>

</html>